<template>
  <div>
    <van-tabs @click="onClick" sticky>
      <van-tab v-for="item in videoTagList" :title="item.name" :key="item.id" :name="item.id">
        <!-- 视频项组件 -->
        <MvItem :videoList="videoList"></MvItem>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script  type='module'>
import MvItem from './components/MvItem'// 视频项组件
import { toStringNum, durationTime } from '../../common/common'
export default {
  name: 'Video',
  props: {
  },
  data () {
    return {
      // 视频标签列表
      videoTagList: [],
      // 视频列表
      videoList: [],
      getTimestamp: new Date().getTime()
    }
  },
  components: {
    MvItem// 视频项组件
  },
  methods: {
    // 获取视频标签列表函数
    async getVideoTagList () {
      const res = await this.$http({ url: '/video/group/list' })
      this.videoTagList = res.data.slice(0, 15).map(item => ({
        name: item.name,
        id: item.id
      }))
    },
    // 获取视频分类列表函数
    async getVideoCalssList () {
      // const { data: res } = await this.$http.get('/video/category/list')
      // console.log(res)
    },
    // 获取分类视频列表函数
    async getVideoList (videoId = 58101) {
      const res = await this.$http({ url: '/video/group?timestamp=' + this.getTimestamp, params: { id: videoId, offset: 1 } })
      this.videoList = res.datas.map(item => ({
        imgurl16v9: item.data.coverUrl, // 封面
        playCount: toStringNum(item.data.playTime), // 播放量
        duration: durationTime(item.data.durationms), // 时长
        name: item.data.title, // 标题
        id: item.data.vid, // vid
        avatarUrl: item.data.creator.avatarUrl, // 作者头像
        nickname: item.data.creator.nickname, // 作者昵称
        praisedCount: item.data.praisedCount, // 点赞数
        commentCount: item.data.commentCount// 评论数
      }))
    },
    onClick (name, title) {
      this.videoList = []
      this.getVideoList(name)
    }
  },
  created () {
    // 调用获取视频标签列表函数
    this.getVideoTagList()
    // 调用获取视频分类列表函数
    this.getVideoCalssList()
    // 调用获取视频列表函数
    this.getVideoList()
    console.log('video')
  }
}

</script>

<style lang="less" scoped>
</style>
